import React, { useEffect, useState, useRef } from 'react'
import './style.less'

const LoadMore = (props) => {
  const more = useRef()
  const [loadTop, setLoadTop] = useState(0)

  useEffect(() => {
    // 视口高度
    let timer = null
    let winHeight = document.documentElement.clientHeight
    window.addEventListener('scroll', scrollHandle)
    function scrollHandle() {
      setLoadTop(more.current.getBoundingClientRect().top)
      if (more.current) {
        if (timer) {
          clearTimeout(timer)
        } else {
          timer = setTimeout(() => {
            if (winHeight > loadTop) {
              props.onLoadMore()
            }
          }, 300)
        }
      }
    }
    return () => {
      // window.removeEventListener('scroll', scrollHandle)
      // clearTimeout(timer)
    }
  }, [loadTop])

  return (
    <div className="loadmore" ref={more}>
      加载更多
    </div>
  )
}

export default LoadMore
